<template>
	<view class="user p-b-40 bg-change psr">
		<view class="ts-46 tb wa left m-30" style="color: white;">
			个人资料
		</view>
		<view class="menu-item menu-item-header">
				<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="menu-item-button">
					<image class="avatar-img" :src="$xyfun.image(accountInfo.avatar)" style="float: left; margin-right: 30rpx;"/>
					<view style="float: left; width: 360rpx;">
						<text class="ts-40 tb tc-green left wa tl">个人头像</text>
						<text class="ts-26 tc-gray left wa tl psr" style="top: -20rpx;">限制2M以下的图片上传</text>
					</view>
				</button>
		</view>
		<view class="menu-item" style="border-top-left-radius: 20rpx; z-index: 2; position: relative;border-top-right-radius: 20rpx; ">
			<view class="uni-list-cell-db" style="color: rgba(102, 102, 102, 0.87);">选择性别</view>
			<view class="select_sex psa ts-26">
				<view class="select_sex_o" :class="accountInfo.gender === 1 ? 'active_sex' : ''" @click="changeSex(1)">男</view>
				<view class="select_sex_o" :class="accountInfo.gender === 2 ? 'active_sex' : ''" style="float: right;" @click="changeSex(2)">女</view>
			</view>
		</view>
		<view class="menu-item" style="height: 40rpx; border-bottom: 1rpx solid rgba(187, 187, 187, 0.3); border-top: 1rpx solid rgba(187, 187, 187, 0.3);">
			<view class="uni-list-cell-db" style="color: rgba(102, 102, 102, 0.87); float: left;">名称</view>
			<input type="text" v-model="accountInfo.nickname" class="menu-item-input" placeholder="请输入名称" />
		</view>
		<view class="menu-item menu-item-last">
			<view class="uni-list-cell-db" style="color: rgba(102, 102, 102, 0.87); width: 120rpx; float: left;">生日</view>
			<picker mode="multiSelector" :value="multiIndex" :range="multiRange" @change="onMultiChange" class="menu-item-select">
				<view class="picker">
					<text>{{ accountInfo.birthday }}</text>
				</view>
				<img src="/static/img/user/right.png" alt="SVG Icon" class="menu-item-icon" />
			</picker>
		</view>
		<view class="form-submit" @click="formSubmit()">
			保存
		</view>
		<image :src="`/static/img/user/bg-user.png`" class="form-item-status psa"/>
	</view>
</template>
<script>
	import { mapState,mapActions } from 'vuex';
	import http_config from '@/config/http'; 
	export default {
		data() {
			const now = new Date();
			return {
				css: {},
				accountInfo: {
					avatar: '',
					gender: 1,
					nickname: '',
					birthday: ''
				},
				multiIndex: [
					now.getFullYear() - 1900, // 年份
					now.getMonth(),           // 月份 (0-11)
					now.getDate() - 1,        // 日期 (1-31，减1以用于索引)
				],
				multiRange: this.getMultiRange(),
			}
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onLoad() {
			this.css = this.$xyfun.css();
			this.loadData();
			
			this.getUserInfo().then(res => {
				this.accountInfo = {
					avatar: res.userInfo.avatar,
					gender: res.userInfo.gender || 1,
					nickname: res.userInfo.nickname || '',
					birthday: res.userInfo.birthday || '请选择生日'
				}
				console.log(this.accountInfo)
			}).catch(e => {
				console.log(e);
			});
		},
		computed: {
			formattedDateTime() {
				const year = this.multiRange[0][this.multiIndex[0]];
				const month = String(this.multiRange[1][this.multiIndex[1]]).padStart(2, '0');
				const day = String(this.multiRange[2][this.multiIndex[2]]).padStart(2, '0');
				return `${year}-${month}-${day}`; 
			},
			...mapState(['user'])
		},
		methods: {
			...mapActions('user',{'getUserInfo':'getInfo'}),
			onChooseAvatar(e) {
				this.accountInfo.avatar = e.detail.avatarUrl;
				this.uploadImage(e.detail.avatarUrl);
			},
			
			// 上传图片
			async uploadImage(url) {
				var that = this;
				uni.showLoading({
					title:'图片上传中...'
				})
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: http_config.base_url + "/api/common/upload",
						filePath: url,
						name: "file",
						header: { token: that.user.info.token },
						success: res => {
							res = JSON.parse(res.data);
							that.accountInfo.avatar = res.data.url;
							resolve(res.data.fullurl);
						},
						complete: e => {
							uni.hideLoading();
						}
					});
				}).catch(e => {
					console.log(e);
				});
			},
			changeSex(e) {
				this.accountInfo.gender = e
			},
			getMultiRange() {
				let yearRange = [];
				let monthRange = [];
				let dayRange = [];
				
				// 生成年月日时分秒的数组
				for (let i = 1900; i <= 2100; i++) yearRange.push(i);
				for (let i = 1; i <= 12; i++) monthRange.push(i);
				for (let i = 1; i <= 31; i++) dayRange.push(i);
				
				return [yearRange, monthRange, dayRange];
			},
			onMultiChange(e) {
				this.multiIndex = e.detail.value;
				setTimeout(() => {
					this.accountInfo.birthday = this.formattedDateTime;
				}, 0);
			},
			system() {
				uni.navigateTo({
					url: `/pages/user/system`
				})
			},
			loadData(){
				this.$api.get({
					url: '/common/template',
					loadingTip:'加载中...',
					data: {
						type:'user',
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.$xyfun.setNavBar(' ',res.page.style.navigationBarBackgroundColor,res.page.style.navigationBarTextStyle);
					}
				});
			},
			formSubmit() {
				let accountInfo = JSON.parse(JSON.stringify(this.accountInfo));
				if (accountInfo.birthday === '请选择生日') {
				    accountInfo.birthday = ''
				}
				this.$api.post({
					url: '/user/user/profile',
					loadingTip:'加载中...',
					data: accountInfo,
					success: res => {
						this.$store.dispatch('user/getInfo')
						setTimeout(() => {
							uni.reLaunch({
								url: 'pages/user'
							})
						}, 0)
					}
				})
			}
		}
	}


</script>

<style scoped lang="scss">
	.avatar-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
	}
	.form-item-status {
		width: 200rpx;
		height: 300rpx;
		right: -30rpx;
		top: -45rpx;
		z-index: 1;
	}
	.select_sex {
		border: 1rpx solid #005650;
		width: 148rpx;
		height: 50rpx;
		right: 60rpx;
		top: 37rpx;
		border-radius: 15rpx;
		overflow: hidden;
		float: left;
		.select_sex_o {
			float: left;
			width: 73rpx;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			color: rgba(102, 102, 102, 0.87);
		}
		.active_sex {
			color: white;
			background-color: #005650;
		}
	}
	.bg-change {
		padding-top: 40rpx;
		background-image: linear-gradient(#005650, white);
	}
	.menu-item-header {
		z-index: 2; 
		position: relative;
		border-radius: 20rpx;
		margin: 150rpx 30rpx 40rpx !important;
		padding: 30rpx 40rpx !important;
		.menu-item-button {
			background: none; 
			border: none;
			padding: 0;
		}
		.menu-item-button::after {
			background: none; 
			border: none;
		}
	}
	.menu-item {
		background-color: #ffffff;
		margin: 0 30rpx;
		padding: 40rpx 60rpx 40rpx 40rpx;
		.menu-item-input {
			float: left; 
			// border: 1rpx solid gray; 
			display: block; 
			height: 30rpx; 
			width: 480rpx;
			position: relative;
			top: 0rpx;
			left: 60rpx;
		}
		.menu-item-select {
			background-color: white; 
			float: left; 
			width: 470rpx;
			position: relative;
			.menu-item-icon {
				position: absolute;
				top: -3rpx;
				right: -40rpx;
			}
		}
		
		img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}
	.menu-item-last {
		margin-bottom: 30rpx;
		border-bottom-left-radius: 20rpx; 
		border-bottom-right-radius: 20rpx;
		height: 41rpx;
	}
	.form-submit {
		margin: 5rpx 30rpx 50rpx;
		width: 689rpx;
		height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
</style>